<template>
  <div>{{ msg }}</div>
</template>

<script>
import { ref } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
export default {
    setup () {
        let msg = ref('')
        const week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        onMounted(() => {
            timeShow()
        })
        const timeShow = () => {
            let myTime = new Date()
            msg.value = myTime.getFullYear() + '年'
            msg.value += toTwo(myTime.getMonth() + 1) + '月'
            msg.value += toTwo(myTime.getDate()) + '日'
            msg.value += week[myTime.getDay()]
            msg.value += toTwo(myTime.getHours()) + ':' 
            msg.value += toTwo(myTime.getMinutes()) + ':'
            msg.value += toTwo(myTime.getSeconds())
        }

        const toTwo = (x) => {
            return x>9?x:'0'+x
        }
        setInterval(timeShow, 1000)
        return {
            msg
        }
    }
}
</script>

<style>

</style>